<template>
	<view class="container">
		<!-- F1: 用户名输入框组 -->
		<view class="input-group">
			<input v-model="uname" :focus="focusedInput==='uname'" class="input" placeholder="用户名/邮箱/手机号" />
			<uni-icons type="person-filled" size="24" color="#666"/>
		</view>
		<!-- F2: 密码输入框组 -->
		<view class="input-group">
			<!-- 注意：小程序/uni-app中的input的type没有password选项 -->
			<input v-model="upwd" :focus="focusedInput==='upwd'" class="input" :password="hidePwd" placeholder="登录密码" />
			<uni-icons @click="hidePwd = !hidePwd" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" size="24" color="#666"/>   
			<text class="separator">|</text>
			<navigator url="/pages/findpwd/findpwd">找回密码</navigator>
		</view>
		<!-- F3: 登录按钮 -->
		<button class="btn" type="primary" @click="doLogin">登 录</button>
		
		<!-- F4: 跳转去注册 -->
		<!-- 注意：“注册”不是page，而是component，所以不能使用navigator -->
		<text class="jumpToComponent" @click="$emit('showChild', {childName:'register'})">还没账号？现在去注册</text>
		
		<!-- F5: 其它登录方式 -->
		<view class="xian">
					<view class="qita">其他方式登录</view>
				</view>
		<view class="f5">
			<uni-icons type="qq" size="26" color="#3399dd"/>
			<uni-icons type="weixin" size="26" color="#2bad13"/>
			<uni-icons type="weibo" size="26" color="#e52227"/>
		</view>
	</view>
</template>

<script>
	import {userLogin} from '@/service'
	export default {
		data(){
			return {
				hidePwd: true,			//是否隐藏密码
				uname: 'yaya',			//用户名
				upwd: '123456',			//密码
				focusedInput: '',	//当前获得输入焦点的元素名
				// focusedInput: 'uname',	//当前获得输入焦点的元素名
				// focusedInput: 'upwd',	//当前获得输入焦点的元素名
			}
		},
		//生命周期方法 —— 组件（不是页面）挂载时
		mounted() {
			//修改导航条中的标题
			uni.setNavigationBarTitle({
				title: '用户登录'
			})
		},
		methods: {	
			async doLogin(){
				//0.先将“当前获得焦点的输入元素”设置为空
				this.focusedInput = ''
				//1.读取用户输入的登录名和密码，并验证
				let uname = this.uname.trim()
				if(!uname){
					uni.showToast({			//弹出一个吐司对话框
						icon:'error',
						title:'用户名不能为空',
						duration: 3000
					})
					//让“用户名”输入框获得输入焦点
					this.$nextTick(()=>{  //在下一次事件循环中再修改模型数据，避免在一次事件循环多次修改导致中间的修改无法渲染出来
						this.focusedInput = 'uname'
					})
					return //退出当前函数的执行
				}
				let upwd = this.upwd.trim()
				if(!upwd){
					uni.showToast({			//弹出一个吐司对话框
						icon:'error',
						title:'密码不能为空',
						duration: 3000
					})
					//让“密码”输入框获得输入焦点
					this.$nextTick(()=>{  //在下一次事件循环中再修改模型数据，避免在一次事件循环多次修改导致中间的修改无法渲染出来
						this.focusedInput = 'upwd'
					})
					return //退出当前函数的执行
				}
				//2.把用户输入提交给服务器端的接口，验证是否登录正确
				let {code,msg,token} = await userLogin({uname, upwd})
				//console.log('服务器返回给客户端的令牌：', token)
				if(code===200){		//服务器端登录验证成功
					//在客户端存储服务器返回的“令牌”——当前客户端的身份信息
					uni.setStorageSync('userToken', token)
					//弹出一个吐司对话框，提示“欢迎回来”
					uni.showToast({
						icon:'none',
						title: '欢迎回来：'+uname
					})
					//判断客户端是否存在“登录原因页”
					let loginReason = uni.getStorageSync('loginReason')
					if(loginReason){	//存在登录原因页
						//清除客户端保存的登录原因页
						uni.removeStorageSync('loginReason')
						//跳转到登录原因页
						uni.navigateTo({ url: loginReason })
					}else {  //不存在登录原因页
						//“跳转”到“用户档案页”——向父组件发射自定义事件
						this.$emit('showChild', {childName:'profile'})						
					}
				}else {	//服务器端登录验证失败
					//弹出一个模态对话框，通知错误原因
					uni.showModal({
						title: '错误',								//对话框标题
						content: '登录失败！服务器返回消息：'+msg,		//对话框主体内容
						showCancel: false,							//是否显示“取消”按钮
						confirmColor:'#0aa1ed',						//"确定"按钮文字颜色
						confirmText:'好的',							//"确定"按钮文字内容
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.container {
	//定位方式：绝对定位 —— 不占布局空间，这样一来一行中就可以同时出现“登录”和“注册” 
	position: absolute;
	width: 100%;
	padding: $uni-spacing-col-lg*2 $uni-spacing-row-lg*2;
	.input-group {
		flex-direction: row;		//弹性容器主轴方向为：横向
		align-items: center;		//子元素在交叉轴上居中对齐
		border-bottom: $uni-border-width $uni-border-style $uni-border-color;//下边框
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		margin-top: $uni-spacing-col-lg;
		.input { flex: 1; }
		.separator { margin: 0 $uni-spacing-row-base;}
	}
	.btn {
		width: 100%;
		height: 36px;
		margin-top: $uni-spacing-col-lg*2;
		background-color: $uni-color-primary;
		border-radius: 18px;
		font-size: $uni-font-size-base;
	}
	.jumpToComponent {
		margin-top: $uni-spacing-col-lg*3;
		&:active {
			opacity: $uni-opacity-half;
		}
	}
	.xian{
				position: relative;
				margin-top: $uni-spacing-col-lg*4;
				border-bottom: $uni-border-width $uni-border-style $uni-border-color;
				.qita{
					position: absolute;
					bottom: -12px;
					left: $uni-spacing-col-lg*10;
					color: $uni-border-color;
					background-color: #fafafa;
					padding: $uni-spacing-row-sm $uni-spacing-row-sm;
				}
			}
	.f5{
		flex-direction: row;
					margin-top: $uni-spacing-col-lg*2;
					justify-content: space-evenly;
	}
}
</style>